<template>
  <view>
    <view v-for="item in list" :key="item.userId" class="comment-item" @click="goCommon(item)">
      <view class="left">
        <image class="avatar" :src="getAvatar(item.avatar)" mode="aspectFill"></image>
        <text v-if="item.unreadCount" class="unread">{{ item.unreadCount }}</text>
      </view>
      <view class="right">
        <view class="info">
          <view class="u-line-1 name">{{ item.userName }}</view>
          <view class="time">{{ $u.timeFrom(Date.parse(item.lastMessageTime), false) }}</view>
        </view>
        <view class="u-line-1 content">{{ item.lastMessage }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import commentApi from '../../request/api/comment'
import config from '../../request/config'

export default {
  data() {
    return {
      list: [],
    }
  },
  onLoad(options) {
    this.getHistory()
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.list = []
    this.getHistory()
  },
  computed: {
    ...mapGetters('userInfo', ['user', 'isCommon', 'isLawyer', 'isSecretary']),
  },
  methods: {
    async getHistory() {
      if (this.isLawyer || this.isSecretary) {
        var { data } = await commentApi.getLeaderUsers({})
      } else {
        var { data } = await commentApi.getUserLeaders({})
      }
      this.list = data
    },
    // 跳转聊天详情
    goCommon(item) {
      uni.navigateTo({
        url: `/pages/common/index?heId=${ item.userId }`
      })
    },
    // 获取头像
    getAvatar(avatar) {
      return avatar ? config.baseUrl + avatar : 'https://sanshengcai.com/home/images/logo.png'
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-item {
  display: flex;
  padding: 0 30rpx;
  margin: 30rpx 0;

  .left {
    flex-shrink: 0;
    position: relative;
    .unread {
      position: absolute;
      right: -10rpx;
      top: -10rpx;
      font-size: 24rpx;
      color: #fff;
      background-color: red;
      border-radius: 50%;
      width: 30rpx;
      height: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 10rpx;
    }
  }
  .right {
    flex-grow: 1;
    color: #333;
    margin-left: 20rpx;
    border-radius: 10rpx;
    padding: 10rpx;
    
    .info {
      display: flex;
      justify-content: space-between;
    }
    .name {
      font-size: 32rpx;
    }
    .time {
      font-size: 24rpx;
      flex-shrink: 0;
    }
    .content {
      font-size: 26rpx;
    }
  }
}
</style>